<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no;email=no" name="format-detection">
    <title>我要报名</title>

    <link rel="stylesheet" href="../../static/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/lib/main.css">
    <link rel="stylesheet" href="../../static/css/module/header.css">
    <link rel="stylesheet" href="../../static/css/module/footer.css">
    <link rel="stylesheet" href="../../static/css/page/apply.css">
</head>
<body>
    <div class="wrapper">
        <!-- 头部 -->
        <header class="hidden-xs">
            <nav class="mainnav">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
                            <ul class="nav nav-pills topnav" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a href="#">活动报名</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">楚才书店</a>
                                </li>
                                <li class="logo-item">
                                    <img src="../../static/images/logo.png" width="105" height="104" alt="logo">
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">个人中心</a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a href="#">登录/注册</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <!-- 正文内容 -->
        <div class="container">
            <div class="main-content">
                <div class="apply">
                    <h1 class="main-title"><span>我要报名</span></h1>
                    <div class="row">
                        <div class="activity-item activity-item--list activity-item--apply">
                            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                                <div class="media">
                                    <a class="media-left" href="#">
                                        <img src="../../static/images/activity.png" width="130" height="130" alt="activity">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">首届“楚才马克杯”作文选拔赛报名活动</h4>
                                        <p class="activity-item__date">2017/01/01-2017/03/15</p>
                                        <p class="activity-item__price">¥20/人</p>
                                    </div>
                                </div>
                            </div>
                            <span class="pay-status"><img src="../../static/images/payed.png" alt="payed"></span>
                            <!--<span class="pay-status"><img src="../../static/images/not_pay.png" alt="not_pay"></span>-->
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
                            <form class="form-horizontal form-apply" role="form">
                                <div class="form-group">
                                    <label for="entryNumber" class="col-sm-3 col-xs-4 control-label">参赛证号:</label>
                                    <div class="col-sm-9 col-xs-7 input-group">
                                        <input type="text" class="form-control" id="entryNumber" placeholder="请输入参赛证号">
                                    </div>
                                    <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的参赛证号</div>
                                </div>
                                <div class="form-group">
                                    <label for="pwd" class="col-sm-3 col-xs-4 control-label">密码:</label>
                                    <div class="col-sm-9 col-xs-7 input-group">
                                        <input type="password" class="form-control ipt-eye" id="pwd" placeholder="请输入密码">
                                        <input type="text" class="form-control ipt-eye" name="password" placeholder="请输入您的密码" style="display: none;">
                                        <span class="input-group-addon input-group-eye"><i class="glyphicon glyphicon-eye-open js-eye-open"></i></span>
                                    </div>
                                    <div class="line-alert line-alert--apply js-line-alert"><i class="glyphicon glyphicon-info-sign"></i>请输入正确的密码</div>
                                </div>
                                <div class="form-group">
                                    <div class="btn-groups btn-groups--apply">
                                        <button class="btn btn-submit col-md-8 col-md-offset-2 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" type="button">验证参赛证</button>
                                    </div>
                                </div>
                                <div class="to-call text-center">
                                    如有疑问请致电：<a class="call-number" href="tel:027-8527811">027-8527811</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="logo-bottom visible-xs text-center">
                    <img src="../../static/images/logo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
                <span class="star"><img src="../../static/images/star.png" alt="star"></span>
                <span class="child"><img src="../../static/images/child.png" alt="child"></span>
                <span class="planet visible-xs"><img src="../../static/images/planet.png" alt="planet"></span>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    版权所有 武汉楚才竞赛网 鄂ICP备14016248号COPYRIGHT @2013-2014 CHUCAI.GNJ.CN ALL RIGHT RESERVED
                    <img src="../../static/images/bluelogo_cjrb.png" width="136" height="42" alt="cjrbLogo">
                </div>
            </div>
        </div>
    </footer>

    <script src="../../static/js/lib/jquery-1.9.1.min.js"></script>
    <script src="../../static/js/lib/bootstrap.min.js"></script>
    <script>
        //修改密码时查看明文
        $(".js-eye-open").on("click", lookPwd);

        function lookPwd(){
            var $pwd = $(this).closest(".input-group").find("input[type='password']");
            var $pwd_show = $pwd.next("input[type='text']");
            var pwd = $pwd.val();
            var pwd_show = $pwd_show.val();

            if($pwd.is(":visible")){
                $pwd.hide();
                $pwd_show.val(pwd).show();
            }
            else{
                $pwd.val(pwd_show).show();
                $pwd_show.hide();
            }
        }
    </script>
</body>
</html>